<template>
  <el-container class="common-layout">
    <!-- 左侧菜单栏 -->
    <el-aside width="200px">
      <!-- unique-opened -->
      <!-- :default-active="$route.path" -->
      <el-menu @select="handleMenuSelect" router>
        <!-- 渲染一级菜单 -->
        <template v-for="route in menuRoutes" :key="route.path">
          <!-- 如果有一级菜单的子路由，渲染为 el-sub-menu -->
          <el-sub-menu
            v-if="route.children && route.children.length > 0"
            :index="route.id + route.path"
          >
            <template #title>
              <i :class="route.icon"></i>
              <!-- el-icon-s-custom -->
              <el-icon><Plus /></el-icon>
              <span>{{ route.title }}222</span>
            </template>
            <!-- 渲染二级菜单       -->

            <el-menu-item
              v-for="child in route.children"
              :key="child.path"
              :index="child.path"
            >
              <i :class="route.icon"></i>

              <span>{{ child.title }}</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 如果没有子路由，渲染为 el-menu-item -->
          <el-menu-item v-else :index="route.path">
            <i :class="route.icon"></i>
            <span>{{ route.title }}111</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="left">
          欢迎回来!
          <span>{{ userStore.user.nickname || userStore.user.username }}</span>
        </div>
        <div class="right">
          <el-dropdown @command="handleCommand" trigger="click">
            <div class="el-dropdown-link">
              <!-- <el-avatar
                :size="40"
                :src="userStore.user.user_pic || state.circleUrl"
              /> -->
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a"
                  ><el-icon>
                    <User />
                  </el-icon>
                  基本资料</el-dropdown-item
                >
                <el-dropdown-item command="b"
                  ><el-icon> <Crop /> </el-icon>更换头像</el-dropdown-item
                >
                <el-dropdown-item command="c"
                  ><el-icon> <EditPen /> </el-icon>重置密码</el-dropdown-item
                >
                <el-dropdown-item command="d"
                  ><el-icon> <SwitchButton /> </el-icon
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <el-scrollbar height="100%">
          <!-- 二级路由 -->
          <!-- <router-view v-slot="{ Component }" :key="key">
              <transition
                name="fade-transform"
                mode="out-in"
                :duration="{ enter: 400, leave: 400 }"
                appear
              >
                <component :is="Component" :key="router.fullPath" />
              </transition>
            </router-view> -->
          <router-view />
        </el-scrollbar>
      </el-main>
    </el-container>
    <!-- 右侧内容区域 -->
    <!-- <el-main>
      <router-view />
    </el-main> -->
  </el-container>
</template>
  
  <script setup>
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const router = useRouter();
// 获取动态路由
// const menuRoutes = router.getRoutes().filter((route) => route.meta.title);
const menuRoutes = userStore.routes;
console.log(menuRoutes, "menuRoutes");

// 当前激活的菜单
const activeMenu = router.path;

// 菜单选择事件
const handleMenuSelect = (path) => {
  router.push(path);
  console.log(path, "11111111");
};
function handleCommand(a) {
  // if (a === "a") {
  //   router.push("/user/profile");
  // } else if (a === "b") {
  //   router.push("/user/avatar");
  // } else if (a === "c") {
  //   router.push("/user/password");
  // } else {
  ElMessageBox.confirm("确定要退出登录吗？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "退出登录",
      });
      userStore.removeToken();
      // localStorage.clear();
      localStorage.setItem("big-user", {});
      userStore.setUser({});
      userStore.setMenu([]);
      router.push("/login");
    })
    .catch(() => {});
}
// }
</script>
  
  <style lang="less" scoped>
.el-main {
  box-sizing: border-box;
}
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}
.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
  box-sizing: border-box;
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
  box-sizing: border-box;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex !important;
  align-items: center !important;

  .el-avatar {
    margin-right: 10px;
  }
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 22px;
  box-sizing: border-box;
  background-color: #fff;

  .left {
    font-weight: 600;

    span {
      margin-left: 20px;
    }
  }
}

.el-container {
  height: 100%;

  .el-menu {
    border: 0 !important;

    .el-menu-item.is-active {
      // background: #1c332a !important;
      background: #52625b !important;

      &::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background-color: #e49460;
      }
    }
  }
}

.common-layout {
  height: 100vh;
  background: #f4f4f4;

  .el-aside {
    height: 100%;
    background: #1c332a;
  }
}
</style>
  